import React, { PureComponent, Fragment } from 'react';
import { connect } from 'dva';
import moment from 'moment';
import {
    Row, Col, Card, Form, Input, Select, Icon,
    Button, Dropdown, Menu, InputNumber,
    DatePicker, Modal, message, Badge, Table,
    Divider, Tag, Tree, Tooltip, Spin,
} from 'antd';
import PageHeaderLayout from '../../layouts/PageHeaderLayout';
import { routerRedux } from 'dva/router';
import DescriptionList from '../../components/DescriptionList';
import styles from './StructureMaintenance.less';

import querystring from 'querystring';
/*
 岗位详情界面
*/
const { TextArea } = Input;
const { Description } = DescriptionList;
const FormItem = Form.Item;
const { Option } = Select;

@connect(({ structure }) => ({
    structure,
}))
@Form.create() 
export default class JobsDetails extends PureComponent {
    state = {
        id: '',
        companyNameInEdit: false,
        jobsDetailsList: {},
        user: {
            positionName: '',
            positionDesc: '',
        },
    };

    componentDidMount() {
        const { dispatch, location } = this.props;
        const params = querystring.parse(location.search.slice(1));
        // console.log("paramsLLLLLLLLL")
        // console.log(params)
        this.setState({
            id: params.id,
        });
        dispatch({
            type: 'structure/jobsDetails',
            payload: {
                postId: params.id,
            },
            callback: () => {
                const { structure: { jobsDetailsList} } = this.props;
                
                jobsDetailsList &&
                this.setState({
                    jobsDetailsList: jobsDetailsList,
                    user: {
                        ...this.state.user,
                        positionName: jobsDetailsList.positionName,
                        positionDesc: jobsDetailsList.positionDesc
                    },
                })
            }
        });
    }

    hanleClickEdit = () => {
        this.setState({
            companyNameInEdit: true,
            userTemp: this.state.user,
        });
    }
    hanleClickSave = () => {
        const { dispatch } = this.props

        if (this.state.user.positionName) {
            this.setState({
                companyNameInEdit: false,
            });
            dispatch({
                type: 'structure/changeJobsDetails',
                payload: {
                    id: this.state.id,
                    positionName: this.state.user.positionName,
                    positionDesc: this.state.user.positionDesc,
                },
                callback: () => {
                    this.props.dispatch({
                        type: 'structure/jobsDetails',
                        payload: {
                            postId: this.state.id,
                        },
                    });
                },
            })
        } else {
            message.warning("岗位名称不能为空")
        }
    }

    hanleClickCancel = () => {
        this.setState({
            companyNameInEdit: false,
            user: {
                ...this.state.user,
                positionName: this.state.jobsDetailsList.positionName,
                positionDesc: this.state.jobsDetailsList.positionDesc,
            }
        });
    }
    handleChangePositionName = (e) => {
        const value = e.target.value;
        this.setState({
            user: {
                ...this.state.user,
                positionName: value,
            }
        });
    }
    handleChangePositionDesc = (e) => {
        const value = e.target.value;
        this.setState({
            user: {
                ...this.state.user,
                positionDesc: value,
            }
        });
    }

    addRole = () => {
        this.props.dispatch(routerRedux.push(`/system/role-list?id=${this.state.id}`));
    }

    deleteRole = (record) => {
        // console.log("wwwwwww")
        // console.log(record)
        // console.log(record.id)
        this.props.dispatch({
            type: 'structure/deleteRole',
            payload: {
                postId: this.state.id,
                roleId: record.id,
            },
            callback: () => {
                this.props.dispatch({
                    type: 'structure/jobsDetails',
                    payload: {
                        postId: this.state.id,
                    },
                });
            },
        });
    }

    columns = [{
        title: '角色名',
        dataIndex: 'roleName',
        key: 'roleName',
    }, {
        title: '角色描述',
        dataIndex: 'remark',
        key: 'remark',
    }, {
        title: '操作',
        dataIndex: 'id',
        id: 'id',
        render: (text, record) => (
            <Fragment>
                <a onClick={() => this.deleteRole(record)}>删除</a>
            </Fragment>
        )
    }];

    render() {

        const { structure: { jobsDetailsList, roleList, loading } } = this.props;
        // const { getFieldDecorator } = this.props.form;

        return (

            <PageHeaderLayout title="岗位详情">
                <Card
                    title="岗位信息"
                    bordered={false}
                    // loading={loading}
                    extra={
                        this.state.companyNameInEdit ?
                            <div>
                                <Button shape="circle" icon="check" onClick={this.hanleClickSave}/>
                                <Button shape="circle" icon="close" style={{ marginLeft: 32 }} onClick={this.hanleClickCancel}/>                             
                            </div>
                            :
                            <a >
                                <Button shape="circle" icon="form" onClick={this.hanleClickEdit}/>
                            </a>
                    }
                > 
                    <DescriptionList style={{ marginBottom: 32 }} col={1}>
                        <Description >
                            <Row>
                                <Description term="岗位名称">
                                    {/* {jobsDetailsList.positionName} */}
                                    {this.state.companyNameInEdit ?
                                        <Input
                                            defaultValue={this.state.user.positionName}
                                            placeholder="请输入岗位名称"
                                            onChange={this.handleChangePositionName}
                                            onPressEnter={this.hanleClickSave}
                                            style={{ width: 400 }}
                                        />
                                        :
                                        this.state.user.positionName
                                    }
                                </Description>
                            </Row>
                        </Description>
                    </DescriptionList>
                    <DescriptionList style={{ marginBottom: 32 }} col={1}>
                        <Description >
                            <Row>
                                <Description term="岗位描述">
                                    {this.state.companyNameInEdit ?
                                        <Input
                                            defaultValue={this.state.user.positionDesc}
                                            placeholder="请输入岗位描述"
                                            onChange={this.handleChangePositionDesc}
                                            onPressEnter={this.hanleClickSave}
                                            style={{ width: 400 }}
                                            rows={4}
                                        />
                                        :
                                        this.state.user.positionDesc
                                    }
                                    {/* {jobsDetailsList.positionDesc} */}

                                </Description>
                            </Row>
                        </Description>
                    </DescriptionList>
                </Card>

                <Card
                    title="角色信息"
                    bordered={false}
                    style={{ marginTop: 20 }}
                    extra={
                        <p>
                            <a >
                                {/* <Icon type="plus-circle-o" style={{ marginRight: 30 }} onClick={this.addRole} /> */}
                                <Button shape="circle" icon="plus" onClick={this.addRole}/>
                            </a>
                        </p>
                    }
                >
                    {/* {JSON.stringify(roleList)} */}
                    <Table
                        columns={this.columns}
                        dataSource={roleList}
                        bordered
                        rowKey="id"
                    />
                </Card>
            </PageHeaderLayout>
        );
    }
}
